<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="set">设置</button>
    <button class="get">获取</button>
    <button class="edit">修改</button>
    <button class="del">删除</button>
    <button class="each">遍历</button>
</body>
<script>
    // webStorage    网页存储(H5新增)
    // WebStorage相关的属性和方法   => 数据的增删改查
    // 属性
    // length  存储数据的数量

    // 方法
    // setItem(key, value)  —— 保存数据，以键值对的方式存储信息 (没有就设置  有就修改)
    // 注意: 键值也只能是字符串类型  (数组/对象 => JSON.stringify()  => JSON字符串)

    // getItem(key)         —— 获取数据，将键值传入，即可获取到对应的value值
    // removeItem(key)      —— 删除单个数据，根据键值移除对应的信息
    // clear()              —— 删除所有的数据
    // key(index)           —— 获取某个索引(index)的key

    //  (localStorage（本地存储）和sessionStorage（会话存储）  => 本质全局对象)
    // console.log(localStorage);
    // console.log(sessionStorage);


    var getBtn = document.getElementsByClassName("get")[0];
    var setBtn = document.getElementsByClassName("set")[0];
    var editBtn = document.getElementsByClassName("edit")[0];
    var delBtn = document.getElementsByClassName("del")[0];
    var eachBtn = document.getElementsByClassName("each")[0];

    setBtn.onclick = function () {
        // 官方
        localStorage.setItem("user", "a123123");
        localStorage.setItem("pwd", "123123");

        // 对象的语法 (localStorage 本质全局对象)
        localStorage.phone = 17386141517;
        localStorage.email = "123123@qq.com";
    }
    getBtn.onclick = function () {
        // 官方
        console.log(localStorage.getItem("user"));
        console.log(localStorage.getItem("pwd"));

        // 对象
        console.log(localStorage.phone);
        console.log(localStorage.email);
    }
    editBtn.onclick = function () {
        localStorage.setItem("user", "b123123");
        localStorage.setItem("pwd", "321321");

        // 对象的语法 (localStorage 本质全局对象)
        localStorage.phone = 17386141516;
        localStorage.email = "3121321@qq.com";
    }
    delBtn.onclick = function () {
        // 官方
        // localStorage.removeItem("user");
        // localStorage.removeItem("pwd");

        // delete  对应键名 删除对象的属性
        // delete localStorage.phone;
        // delete localStorage.email;

        localStorage.clear();
        console.log(localStorage);
    }
    eachBtn.onclick = function () {
        // key()   对应下标(0- length-1) 返回键名
        console.log(localStorage.key(0));
        console.log(localStorage.key(1));
        console.log(localStorage.key(2));
        console.log(localStorage.key(3));

        for (var i = 0; i < localStorage.length; i++) {
            var key = localStorage.key(i);
            console.log(key, localStorage.getItem(key), localStorage[key]);
        }

        console.log(localStorage);
    }

</script>

</html>